<template>
	<view class="out-box">
		<u-navbar back-text="返回" title="工资托管" :border-bottom="false" :back-text-style="{color: 'rgba(16,142,233,1)' }"
		 back-icon-color="#108EE9">
		</u-navbar>
		<!-- 头部 -->
		<view class="top-card">
			<view class="top-title">
				选择已发布的职位
			</view>
			<view class="select-type" @click="showKindType=true">
				<view class="left-text">
					{{ form.kind?form.kind:'成都市招支模工' }}
					<text>
						编号：ZW12355
					</text>
				</view>
				<view class="right-icon">
					<image src="../../../static/images/common/right.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 头部 -->
		<!-- 内容 -->
		<view class="center-card">
			<view class="item-content" @click="goDetails">
				<view class="title">
					TG123456
				</view>
				<view class="item-flexd">
					<view class="item-left">
						托管人数:
					</view>
					<view class="item-right">
						3人
					</view>
				</view>
				<view class="item-flexd iten-botton">
					<view class="item-left">
						托管总额:
					</view>
					<view class="item-right">
						￥14000元
					</view>
				</view>
				<view class="item-btn-box">
					<view class="nobg-btn" @click.stop="goEdti">
						托管编辑
					</view>
					<view class="bg-btn" @click.stop="goGrant">
						工资发放
					</view>
					<view class="nobg-btn">
						托管详情
					</view>
					<view class="nobg-btn" @click.stop="goSuccess">
						完成托管
					</view>
				</view>
			</view>
		</view>
		<!-- 内容 -->
		<view class="foot-btn" @click="addTrusteeship">
			新建工资托管
		</view>
		<u-select v-model="showKindType" mode="mutil-column-auto" :list="kindList" @confirm="selectJobType"></u-select>
	</view>
</template>

<script>
	import multipleMixin from '@/mixin/multiple-data-mixin';
	export default{
		mixins: [multipleMixin],
		data(){
			return{
				showKindType:false,
				form:{
					kind:''
				}
			}
		},
		methods:{
			selectJobType(e) {
				this.form.kind = e[2].label
			},
			addTrusteeship(){
				this.$u.route({
					url: 'pages/recruit/trusteeship/add',
				})
			},
			goGrant(){
				this.$u.route({
					url: 'pages/recruit/salary/grant',
				})
			},
			goDetails(){
				this.$u.route({
					url: 'pages/recruit/trusteeship/details',
				})
			},
			goEdti(){
				this.$u.route({
					url: 'pages/recruit/trusteeship/edit',
				})
			},
			goSuccess(){
				this.$u.route({
					url: 'pages/recruit/trusteeship/success',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.out-box{
		background:rgba(246,246,246,1);
		width: 100%;
		min-height: 100vh;
		.top-card{
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			background:rgba(255,255,255,1);
			opacity:1;
			.top-title{
				font-size:28rpx;
				font-weight:400;
				line-height:37rpx;
				color:rgba(153,153,153,1);
				opacity:1;
			}
			.select-type{
				margin-top: 20rpx;
				width: 100%;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid rgba(223,223,223,1);
				display: flex;
				justify-content: space-between;
				.left-text{
					font-size:32rpx;
					font-weight:600;
					line-height:43rpx;
					color:rgba(102,102,102,1);
					opacity:1;
					text{
						display: inline-block;
						margin-left: 30rpx;
						font-size:26rpx;
						font-weight:400;
						line-height:35rpx;
						color:rgba(102,102,102,1);
						opacity:1;
					}
				}
				.right-icon{
					width: 14rpx;
					height: 24rpx;
					image{
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
		}
		.center-card{
			padding: 0 30rpx 30rpx;
			width: 100%;
			box-sizing: border-box;
			.item-content{
				width: 100%;
				margin-top: 40rpx;
				padding: 30rpx;
				background:rgba(255,255,255,1);
				box-sizing: border-box;
				.title{
					font-size:36rpx;
					font-weight:600;
					line-height:48rpx;
					color:rgba(102,102,102,1);
					opacity:1;
					margin-bottom: 32rpx;
				}
				.item-flexd{
					margin-top: 22rpx;
					display: flex;
					justify-content: space-between;
					width: 100%;
					
					.item-left{
						font-size:26rpx;
						font-weight:400;
						line-height:35rpx;
						color:rgba(153,153,153,1);
						opacity:1;
					}
					.item-right{
						font-size:28rpx;
						font-weight:400;
						line-height:37rpx;
						color:rgba(51,51,51,1);
						opacity:1;
					}
				}
				.iten-botton{
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid rgba(223,223,223,1);
				}
				.item-btn-box{
					width: 100%;
					display: flex;
					justify-content: space-around;
					flex-direction: row;
					flex-wrap: wrap;
					.nobg-btn{
						margin-top: 30rpx;
						width:240rpx;
						height:80rpx;
						border:1rpx solid rgba(211,176,104,1);
						opacity:1;
						border-radius:8rpx;
						text-align: center;
						line-height: 80rpx;
						font-size:28rpx;
						font-weight:bold;
						color:rgba(211,176,104,1);
						opacity:1;
					}
					.bg-btn{
						margin-top: 30rpx;
						width:240rpx;
						height:80rpx;
						background:linear-gradient(180deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
						opacity:1;
						border-radius:8rpx;
						text-align: center;
						line-height: 80rpx;
						font-size:28rpx;
						font-weight:bold;
						color:rgba(255,255,255,1);
						opacity:1;
					}
				}
			}
		}
		.foot-btn{
			position: fixed;
			bottom: 28rpx;
			left: 0;
			right: 0;
			margin: auto;
			width:290rpx;
			height:90rpx;
			background:linear-gradient(360deg,rgba(211,176,105,1) 0%,rgba(228,205,112,1) 100%);
			box-shadow:0px 10rpx 20rpx rgba(154,123,0,0.32);
			opacity:1;
			border-radius:1000rpx;
			font-size:32rpx;
			font-weight:bold;
			line-height:90rpx;
			color:rgba(255,255,255,1);
			text-shadow:0px 2rpx 4rpx rgba(0,0,0,0.20);
			opacity:1;
			text-align: center;
		}
	}
</style>
